Welcome to ITGraph(tm), INDRA Technology's Custom Control for Visual Basic. The ITGraph(tm) Custom Control allows you to easily add graph drawing capabilties to your applications. The ITGDEMO.EXE application illustrates some of ITGraph's numerous features. This file describes how to use the demo and indicates which ITGraph features are used to implement the demo capabilties.
To use the runtime version of the demo, add a new item in the Windows Program Manager for the ITGDEMO.EXE application. Make sure that ITGRAPH.VBX, CMDIALOG.VBX, COMMDLG.DLL and VBRUN300.DLL are somewhere in your path or ITGDEMO won't be able to run. Note that if you have the demonstration version of ITGRAPH.VBX, you will not be able to add graphs with more than 8 nodes.
The ITGDEMO.EXE application begins by bringing up the "ITGraph Property Playground" form. This form shows an ITGraph Custom Control window preloaded with two nodes (labeled "Node #1" and "Node #2") and a single connection (labeled "Connection"). The ITGraph control provides several custom events that can be used to support user interaction from your application.
* Move the mouse cursor over a node in the graph. The box below the graph will show the node's name. The "ItemMouseOver" event is used to implement this capability. If you drag over a handle (the small circles on the four sides of the node), the handle number will appear in brackets next to the node's name. Handles are discussed more in depth below.
* Double-click on a node. ITGraph's "ItemClick" and "ItemDblClick" methods inform your application of mouse events in nodes or node handles. The demo application responds by bringing up a dialog box showing the node's properties. The "List" property allows you to individually assign each node a name. The "DrawItemLabel" property, accessed by clicking on the "Draw" box, specifies whether or not a node's label will be drawn on the graph. The "ItemId" property is an ITGraph-assigned permanent identifier for each node. The "ItemData" property can be set by the application (you can change it in the demo by entering a value in the edit box). The "ItemXpos" and "ItemYpos" properties are usually set by ITGraph, but your application can set them as well. Typing in new values in the demo will cause the node to be moved. The "Sources" and "Targets" list boxes list the nodes connected to the selected node. ITGraph has a set of query properties which are used to fill these lists. The "ItemBorderColor", "ItemFillColor" and "ItemTextColor" can be changed from their default values for each node. ItemShape and ItemGraphic are used to set the node shape and graphic. The "Set" buttons bring up the "Select a Shape" and "Select a Graphic" dialog boxes, where shapes and graphics can be selected, and graphics imported. The "GraphicStyle" combo box provides options for drawing a graphic. See the online help file for a description of the "ItemGraphicStyle" property for details. The "Text Alignment" and "Graphic Alignment" groups allow you to specify a rectangle within the node that will contain the text or graphic, and to define the alignment of the item within that rectangle. Press the "Accept" button to modify the node information, "Cancel" to leave the node as it is and "Delete" to remove the node and its associated connections.
* Double-click on a connection. ITGraph's "LineClick" and "LineDblClick" events can be used to respond to mouse events over connections. The demo application shows a "Connection Properties" dialog box with information about the connection and its source and target nodes. The "ConnectionId" is assigned by ITGraph. You can change the "ConnectionLabel", "ConnectionData", type of "ConnectionArrow", "ConnectionColor" and "ConnectionLineWidth" for each connection in the graph. The "Alignment" determines how a multiline label will be aligned. Press "Accept" to modify the connection information, "Cancel" to return to the graph without changing the connection, or "Delete" to remove the connection.
* Move the mouse cursor over a node or handle and press the left mouse button. While holding the button down, drag the mouse to another node or handle and then release the button. You should see a rubber band line as you are dragging (if not, check the "RubberBand" description below). When you finish, an "ItemConnect" message is sent by the control, allowing the application to add the connection to the graph (or some other appropriate action).
* Move the cursor over a blank area on the screen and press the left or right mouse button. Drag to another location and release. If the "SelectRectEnabled" and "Zoom On SelectRect" boxes are checked, the demo will respond to the SelectRect event by zooming your graph to the area you selected.
* Double-click on a blank portion of the graph. The "DblClick" event will be sent to the application, which will respond by seting "DrawScale" to 0, which fits the graph within the ITGraph control window.
* Press the mouse button over the binoculars icon. Drag the binoculars over a node in the graph and release. The node will be centered on the display. This complex behavior is implemented using several of ITGraph's features. The "DragDrop" and "DragOver" events are used to determine when something has been dropped on an ITGraph control. The ITGraph selection rectangle and query properties are used to determine which item was hit. Finally, the "ZoomSelectRect" property is used to zoom in on the selected item.
To the right of the ITGraph control are various controls that can be used to experiment with the ITGraph settings.
* Click the "BackColor" box to change the background color of the control from its initial gray.
* Click the "FillColor" box to change the default fill color for nodes. Each ITGraph node can have its own fill color, or use the default.
* Click the "ForeColor" box to change the default color for lines and text. Each ITGraph node has settable border and text colors and each connection can have its own color.
* Click the box labeled "Sample Text" to change the text font, size and style.
* Click the "DrawArrows" checkbox to toggle drawing of connection arrows. This will toggle drawing of arrows for all connections, whether or not they have arrowheads.
* Click the "DrawBackLinks" and "Dashed" checkboxes to determine if and how backlinks will be drawn. Backlinks only appear in the "ITG_ModeHierarchy" and "ITG_ModeTree" settings in the "ArrangeMode" group. Backlinks are connections that run the opposite direction from the graph flow.
* Click the "DrawColored" checkbox to toggle color in the graph. This is usefule for printing, where colors may not show up well.
* Click the "DrawConnLabels" checkbox to toggle drawing of connection labels.
* Click the "DrawHandles" checkbox to toggle drawing of handles. Handles only appear when "ArrangeMode" is "ITG_ModeFlowChart". They are used to define at which side of a node a connection originates or terminates.
* Click the "DrawItemLabels" checkbox to toggle drawing of labels on nodes.
* Click the "Enabled" checkbox to enable or disable the ITGraph control's event handling.
* Click the "Visible" checkbox to hide or show the ITGraph control.
* Click the "Redraw" checkbox to disable updating of the graph until the box is checked again.
* ITGraph has the capability to automatically layout the graph according to a few predefined layout schemes. The "AutoArrange" property lets you specify the frequency at which the graph is rearranged. "ITG_ManualArrange" disables ITGraph's autolayout feature. "ITG_AutoArrange" causes the graph to be rearranged every time a change is made. Pressing "ITG_ArrangeNow" causes the graph to be rearranged one time.
* The "ArrangeMode" settings determine the layout algorithm to be used for autoarrange. These settings also influence the way connections are drawn between nodes. "ITG_ModeHierarchy" lays the graph out in a hierarchical fashion. This is useful for general graphs. "ITG_ModeCompact" lays the graph out as compactly as possible, trying to minimize line crossings. This is useful for network-like diagrams. "ITG_ModeFlowChart" lays the graph out in a flowchart format. With the added benefit of node handles, this style is useful for more precise layout. The "ITG_ModeTree" style is useful for trees and organization charts. By varying the spacing ("XSpace", "YSpace" and "Gap"), a variety of tree-like layouts can be achieved.
* "DrawDir" determines the primary flow direction of the graph. It applies to all layout modes except "ITG_ModeCompact".
* "DrawScale" is used to change the graph magnification. A value of 100 is normal size, small values shrink the graph and larger ones expand it. A setting of 0 causes the graph to be scaled to the ITGraph window size, so all nodes are visible.
* "XSpan" and "YSpan" define the width and height to use for ITGraph nodes.
* "XSpace" and "YSpace" specify the horizontal and vertical spacing to use between nodes. The precise spacing depends on the "ArrangeMode" setting.
* "Gap" is used to determine how far from a node a connection will begin branching. In "ITG_ModeTree" mode, setting "Gap" to 0 produces a tree, while setting it to a higher value and setting "XSpace" or "YSpace" to 0 produces an org chart.
* "LineWidth" determines the thickness of connections in the graph.
* The "RubberBand" options determine when ITGraph will show rubber band lines. "ITG_RBNone" disables rubber band lines. "ITG_RBItems" shows rubber bands when you click on a node and begin dragging to another (note that if "DragItems" is checked, clicking on a node will initiate dragging instead). "ITG_RBHandles" shows rubber bands when you click on a node handle and begin dragging. "ITG_RBBoth" shows rubber band lines when you click on a node or a handle.
* Check the "DragItems" checkbox to enable dragging nodes. Press the left mouse button while the cursor is over a node, hold the button and drag the node outline, and finally release the mouse button. The node will be moved to the new location and its connections will be adjusted.
* Check the "SelectRectEnabled" checkbox to enable dragging of a selection rectangle. Now, click with the mouse in a blank area of the graph and begin dragging. A selection rectangle will be defined. This rectangle can be used by the application to implement zooming, scrolling or any other custom behavior.
* If the "Zoom On SelectRect" box is checked, dragging a selection rectangle will cause the display to zoom in on the selected area. If not checked, the selected area will be centered in the window, but the scale will not change.
* Press the "AddItem" button to bring up a "New Item Properties" dialog box. Enter the information for the new item and press the Accept button to add it to the graph.
* Press the "LoadFrom" button to load a graph file. Select the graph that you want and press the "OK" button. The ITGraph control will show the new graph.
* Press the "Special" button to get a menu of special commands to try:
* Choose the "Fit Graph to Window" option to set "DrawScale" to 0, causing ITGraph to scale the graph for the window size.
* Choose "Print the Graph" to send the graph to the printer. You may want to turn of the "DrawColored" checkbox first.
* Choose "Generate a Random Graph" to generate a random graph. You may need to click the "ITG_ArrangeNow" button to automatically layout the graph.
* Choose "Select a Node in the Graph" to popup a list of nodes in the graph. Clicking on a node will cause that node to be centered in the display.
* Choose "Info on a Graph Connection" to popup a list of connections in the graph. Clicking on a connection will cause the "Connection Properties" form for that connection to be shown.
* Choose "Clear the Graph" to remove all nodes and connections from the current graph.
* Choose "Save the Current Graph" to save your graph in a file.
* Choose "Transfer Graph to a Control" to copy the graph image to another control. The "PrintToDC" and "PrintToWnd" properties allow you a great deal of flexibility in creating custom reports and layouts using ITGraph graphs.
* Press the "Cancel" button to return to the main screen.
This concludes our tour of INDRA Technology's ITGraph(tm) Custom Control for Visual Basic. Feel free to experiment with the Property Playground. You may want to look at the source code to get a better idea of how ITGraph works. The ITGRAPH.HLP file describes in detail all ITGraph properties, events and methods.
To order the full version of ITGraph, call INDRA Technology today at 800-735-7776.
